<template>
  <div class="patientDetails">
    <!-- 头部 （添加,编辑,查询） -->
    <div class="top">
      <span class="goBack" @click="goBack">
        <img src="./image/goBack.png" />
        <span>返回上一级</span>
      </span>
      <el-button type="success" @click="outHospital" v-if="type==1">出院</el-button>
    </div>
    <div class="bottom">
      <!-- 基本信息 -->
      <div class="patientinfo">
        <ul class="title">
          <li>基本信息</li>
          <li>
            <el-button
              type="primary"
              size="small"
              @click="openidentityInfo(true, 'edit')"
              v-if="type==1">编辑</el-button
            >
          </li>
        </ul>
        <ul class="info_details">
          <template v-for="(item, index) of patientinfo">
            <li
              class="info_details_item"
              :key="index"
              v-if="item.label != '性别:'"
            >
              <span class="label">{{ item.label }}</span>
              <span class="info">{{ item.val }}</span>
            </li>
            <li class="info_details_item" :key="index" v-else>
              <span class="label">{{ item.label }}</span>
              <span class="info">{{ item.val == 0 ? "女" : "男" }}</span>
            </li>
          </template>
        </ul>
      </div>
      <!-- 控糖目标 -->
      <div class="dataPresentation">
        <ul class="title">
          <li>控糖目标</li>
          <li>
            <el-button
              class="editBtn"
              size="small"
              type="danger"
              @click="editBlood"
              v-if="type==1"
              >编辑</el-button
            >
          </li>
        </ul>
        <!-- 控糖多选框 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            disabled
            v-for="item of checkTitle"
            :label="item.id"
            :key="item.label"
            >{{ item.label }} {{ item.programGlDownvalue }} -
            {{ item.programGlUpvalue }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- 血糖数据/出入院记录 -->
        <blood-sugar
          v-if="patientID && patientinfo[6].val"
          @addBloodVisible="setaddBlood"
          :hospitalNum="patientinfo[6].val"
          :patientID="patientID"
          ref="bloodrecord"
        ></blood-sugar>
      </div>
      <!-- 编辑控糖目标弹框 -->
      <el-dialog
        class="bloodSetting"
        title="血糖设置"
        :visible="bloodSettingVisible"
        width="60%"
        center
      >
        <el-form>
          <el-form-item v-for="item in checkTitle" :key="item.label">
            <el-checkbox-group v-model="checkList" @change="checkListchange">
              <el-checkbox :label="item.id">{{ item.label }}</el-checkbox>
              <el-input-number
                v-model="item.programGlDownvalue"
                :precision="1"
                :step="0.1"
                :max="50"
                :controls="false"
                class="minimum"
              >
              </el-input-number>
              <el-input-number
                v-model="item.programGlUpvalue"
                :precision="1"
                :step="0.1"
                :max="50"
                :controls="false"
                class="maximum"
              ></el-input-number>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span class="tips">血糖单位为mmol/L</span>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="bloodSettingVisible = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="subEditor"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 基本信息编辑弹框 -->
    <identity-info
      v-if="identityInfoVisible"
      :dialogVisible="identityInfoVisible"
      :extent="extent"
    ></identity-info>
    <!-- 添加血糖 -->
    <add-blood
      v-if="addBloodVisible"
      :dialogVisible="addBloodVisible"
    ></add-blood>
    
  </div>
</template>

<script>
// 基本信息修改组件引入
import identityInfo from "./identityInfo";
// 血糖数据/出入院记录组件引入
import bloodSugar from "./bloodSugar";
// 添加血糖组件
import addBlood from "./addblood";


export default {
  data() {
    return {
      // 用户基本信息渲染绑定
      patientinfo: [
        { label: "姓名:", val: "" },
        { label: "性别:", val: "" },
        { label: "年龄:", val: "" },
        { label: "身份证号:", val: "" },
        { label: "糖尿病类型:", val: "" },
        { label: "床号:", val: "" },
        { label: "住院号:", val: "" },
        { label: "入院日期:", val: "" },
        { label: "手机号:", val: "" },
        { label: "身高:", val: "" },
        { label: "体重:", val: "" },
        { label: "bmi糖化:", val: "" },
        { label: "糖化值:", val: "" },
      ],
      // 控糖所有时间节点
      checkTitle: [],
      // 控糖时间数组（编辑）
      checkList: [],
      // 控糖时间数组（回显）
      checkListEcho: [],
      // 整体数据循环数组
      overallTitle: [
        { label: "总计", val: "total" },
        { label: "正常次数", val: "total" },
        { label: "偏高次数", val: "total" },
        { label: "偏低次数", val: "total" },
        { label: "最高血糖", val: "total" },
        { label: "最低血糖", val: "total" },
      ],
      bloodSettingVisible: false, //血糖设置弹框显示隐藏
      num: "1",
      patientID: "",
      identityInfoVisible: false,
      addBloodVisible: false, //添加血糖弹框显示隐藏
      extent: "",
      total: 100,
      page: 1,
      type:1,
    };
  },
  mounted() {
    this.patientID = this.$route.query.id;
    this.getpatientDetails(this.patientID);
    this.type=this.$route.query.type;
    // console.log(this.type);
  },
  methods: {
    goBack() {
      this.$router.back(-1);
    },
    //激活弹框,进行修改
    editBlood() {
      this.bloodSettingVisible = true;
    },
    checkListchange(val) {},
    // 提交修改
    subEditor() {
      // 过滤出选中的所有数组
      let selectList = this.checkTitle.filter((item) => {
        return this.checkList.includes(item.id);
      });

      selectList.forEach((item) => {
        item.programGlOption = 1;
      });

      // 过滤未选中的所有数组
      let UncheckedList = this.checkTitle.filter((item) => {
        return !this.checkList.includes(item.id);
      });

      UncheckedList.forEach((item) => {
        item.programGlOption = 0;
      });

      // 最终修改完成后的数组
      let checkTitle = UncheckedList.concat(selectList);
      this.$api
        .updatePatient(checkTitle)
        .then((res) => {
          this.$message.success(res.message);
          let patientID = this.$route.query.id;
          this.getpatientDetails(patientID);
          this.bloodSettingVisible = false;
        })
        .catch((err) => {
          let patientID = this.$route.query.id;
          this.getpatientDetails(patientID);
          this.bloodSettingVisible = false;
        });
    },
    // 患者详情
    getpatientDetails(id) {
      let data = {
        id,
      };
      this.$api
        .getpatientDetails(data)
        .then((res) => {
          let patientinfo = {};
          // 基本信息
          patientinfo = res.data.bloodSugarPatientInfo;
          let patientinfolist = [
            { label: "姓名:", val: "userName" },
            { label: "性别:", val: "sex" },
            { label: "年龄:", val: "age" },
            { label: "身份证号:", val: "idCard" },
            { label: "糖尿病类型:", val: "sugarType" },
            { label: "床号:", val: "bedNum" },
            { label: "住院号:", val: "hospitalNum" },
            { label: "入院日期:", val: "toHospitalTime" },
            { label: "手机号:", val: "phone" },
            { label: "身高:", val: "height" },
            { label: "体重:", val: "weight" },
            { label: "bmi糖化:", val: "sugarBmi" },
            { label: "糖化值:", val: "sugarNum" },
          ];
          this.patientinfo = patientinfolist.map((item) => {
            return (item = {
              label: item.label,
              val: patientinfo[item.val],
            });
          });
          // 控糖目标
          let bloodSugarGluceProgram = res.data.bloodSugarGluceProgram;
          let labelArr = [
            "空腹",
            "早餐前",
            "早餐后",
            "午餐前",
            "午餐后",
            "晚餐前",
            "晚餐后",
            "睡前",
            "凌晨",
            "随机",
          ];
          this.checkTitle = bloodSugarGluceProgram.map((item) => {
            item.label = labelArr[item.programGlAttr];
            return item;
          });
          let checkList = this.checkTitle.filter((item) => {
            return item.programGlOption == 1;
          });
          this.checkList = checkList.map((item) => {
            return (item = item.id);
          });
        })
        .catch((err) => {
          this.patientinfo = [];
        });
    },
    // 设置用户基本信息编辑框
    openidentityInfo(status, type) {
      this.identityInfoVisible = status;
      this.extent = type;
      if (!status) {
        this.getpatientDetails(this.patientID);
      }
    },
    // 设置添加血糖弹框
    setaddBlood(val) {
      this.addBloodVisible = val;
      if (!val) {
        // this.$router.go(0);
      }
    },
    // 患者出院
    outHospital() {
      this.openidentityInfo(true, "leavehospital");
    },
  },
  components: {
    identityInfo,
    bloodSugar,
    addBlood,
  },
};
</script>

<style lang="scss" scoped>
.patientDetails {
  .top {
    height: 75px;
    padding: 23px;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    margin-bottom: 6px;
    .el-button {
      height: 36px;
    }
    .goBack {
      position: absolute;
      left: 0;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #01a7f0;
    }
  }
  .bottom {
    background-color: #fff;
    .patientinfo {
      .info_details {
        margin: 0;
        padding-left: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .info_details_item {
          list-style: none;
          width: 290px;
          display: flex;
          align-items: center;
          .label {
            width: 80px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
          .info {
            width: 200px;
          }
        }
      }
    }
    .dataPresentation,
    .patientinfo {
      .title {
        margin: 0;
        padding: 20px 26px;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: red;
        .my_switch {
          display: flex;
          align-items: center;
          // background-color: #01a7f0;
          // line-height: 36px;
        }
      }
    }
    .dataPresentation {
      .el-checkbox-group {
        padding-left: 48px;
        .el-checkbox {
          width: 250px;
          & >>> .el-checkbox__label {
            color: #333333;
            &::after {
              content: "mmol/L";
            }
          }
        }
      }
      .exhibition {
        padding: 0;
        display: flex;
        padding-left: 48px;
        // justify-content: space-around;
        .develop,
        .overall {
          list-style: none;
        }
        .overall {
          width: 200px;
          margin-right: 0.5rem;
          .label {
            color: #999999;
            font-size: 16px;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: 400;
          }
        }
      }
    }
  }
  .bloodSetting {
    .el-form {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 50px;
      .el-form-item {
        width: 40%;
        display: flex;
        align-items: center;
        & >>> .el-form-item__content {
          margin: 0;
          text-align: center;
          width: 100%;
          .el-checkbox-group {
            display: flex;
            justify-content: center;
            .el-input-number {
              max-width: 80px;
            }
            // .maximum{
            //   background: #01a7f0;
            //   position: relative;
            //   &::after{
            //     content: "mmol/L";
            //     color: red;
            //     position: absolute;
            //     // display: block;
            //     // right: 20px;
            //   }
            // }
            .el-checkbox {
              // background-color: #01a7f0;
              text-align: left;
              margin: 0;
              width: 80px;
            }
          }
        }
      }
      @media screen and (max-width: 1197px) {
        .el-form-item {
          width: 100%;
        }
      }
    }
    & >>> .el-dialog__header {
      font-size: 20px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #333333;
      text-align: center;
      background-color: #01a7f0;
      .el-dialog__headerbtn {
        display: none;
      }
    }
    .tips {
      display: block;
      text-align: center;
      font-size: 18px;
    }
  }
}
</style>